<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		 <style type="text/css">
		 	body{
		 		font-size:  16px ;
		 		}
		 		label{
		 			display:inline-block;
		 			width: 120px;
		 			text-align: right;
		 			}
		 </style>
		<title>
			表单检验
		</title>

		<script language="JavaScript">
			<!-- 用户名输入框失去焦点时，触发一个事件，检查用户名是否合法，即用户名不能为空切用户名不得少于3个字符。 -->
			<!-- 当密码框失去焦点时，触发一个事件，检查密码是否合法，即少于6个字符视为不合法 -->
			<!--  再次输入密码时，若两次密码不一样，则不能通过-->
			<!-- 检查邮箱地址是否合法 -->
			<!-- 点击提交按钮，则再次检查 -->

				
					//检测用户名
			function checkName(){
				//用于去除用户输入字符串两端的空格
				var name = $.trim($('#username').val());
				var len= name.length;
				var errmsg=null;
				ret = false;
				
				if(len==0){
					errmsg="用户名不能为空";
					}
				else if (len < 3) {
						errmsg = "用户名不能少于三个字符";
				}
				else {
					 errmsg = "ok";
					 ret = true;
				}
					$('#001').text(errmsg);
					return ret;
				}
				
				//检测password
			function  checkPassword(){
				var psw = $('#upass').val();
				var len= psw.length;
				ret= false;
				
				var errmsg = null;
				
				if(len==0){
					errmsg = "密码不能为我空";

				}else if (len<6) {
					errmsg = '密码不能小于6位';
				}else {
					errmsg = 'ok';
					ret = true;
				}
				$('#userPassword-Element span').text(errmsg);
				return ret;
			}
				
				//检测重复输入密码
			function checkPassword2(){
					var psw2 = $('#upass2').val();
					var psw =  $('#upass').val();
					var len = psw2.length;
					var errmsg = null;
					ret = false;
					if(len== 0){
						errmsg  = '重复密码不能为空';
						}else if (psw !=psw2) 
							{errmsg = '两次输入的密码不一致';
								}
						else{
							errmsg = 'ok';
							ret= true;
							}
					$('#userPassword-Element2 span').text(errmsg);
					return ret;
				}
				
				//写正则表达式匹配邮箱地址
				//邮箱不区分大小写，首先将大写字母转换为小写
				//yuanyao   1-30个字符a-z组成
				//@
				//qq  2-4个字符 字母 数字 中横线
				//. 
				//com 2-4字符 字母
				//Perl 风格正则表达式
				// /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{2,4}/
				
				
				function isEmail(str){
					str = str.toLowerCase();
					var regex = /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{2,4}/;
					return regex.test(str);
					}
			function checkEmail(){
				//用于去除用户输入字符串两端的空格
				var email = $.trim($('#useremail').val());
				var len= email.length;
				var errmsg=null;//用于出错信息用户信息
				ret = false;//默认值为false
				
				if(len==0){
					errmsg="邮箱不能为空";
					}
				else if (!isEmail(email)) {
						errmsg = '邮箱格式不正确';
				}
				else {
					 errmsg = "ok";
					 ret = true;
					 
				}
					$('#userEmail-Element span').text(errmsg);
					return ret;
				}

			$(document).ready(function(){
				$('#username').blur(function() {
					 checkName();
				$('#upass').blur(function(){
					checkPassword();
					});
				$('#upass2').blur(function(){
					checkPassword2();
					});
				$('#useremail').blur(function(){
					checkEmail();
					});
				});

				//提交时，有任何一项不满足条件都不能提交。
			$('#btn').click(function(){
				if(!checkName()){
						return false;
					}
				if(!checkPassword()){
					return false;
					}
					if(!checkPassword2()){
					return false;
					}if(!checkEmail()){
					return false;
					}
					
				
				});
				});
		</script>
	</head>
	
	<body>
		<form method="post" action="" >
			<div id="userName-Element">
				<label for="username" >
					请输入用户名
				</label>
		 <input id="username"  type="text" name="username"  />
		 <span id = "001"></span>
			</div>
			<div id="userPassword-Element">
				<label for="upass" align="left">
					请输入密码
				</label>
		 <input id="upass" type="password" name="password"/>
		 <span></span>
			</div>

			<div id="userPassword-Element2">
				<label for="upass2" align="left">
					请再次输入密码
				</label>
				<input id = "upass2" type="password" name="password"/>
				<span></span>
			</div>

			<div id="userEmail-Element">
				<label for= "useremail">
					请输入邮箱
				</label>
				<input id = "useremail" type="text" name="email"/>
				<span></span>
			</div>


			<div id="btn-Element">
				<input id='btn' type='submit' value='提交'>
			</div>
		
		</form>
	</body>
</html>